<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>父组件的数据传递到子组件</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	<local-component :link="nav" :lesson="course"></local-component>
	<hr>
	<global-component :link="nav"></global-component>
</div>

</body>
<script>
const app = Vue.createApp({
	data() {
		return {
			nav:['首页', '视频', '工具', '课程'],
			course: 'Vue.js',
		}
	},
	components:{
		'local-component':{
			data:function(){
				return {
					site:'HTML中文网',
				};
			},
			//props是用来接受父组件传递过来的数据的容器，是一个数组
			props:['link', 'lesson'],
			template: `
				<div>
					<h3>局部组件</h3>
					<p>欢迎来到  {{site}}，学习</p>
					<ul>
						<li v-for="item in link">
							<a href="">{{item}}</a>
						</li>
					</ul>
					{{lesson}}
				</div>
			`,
		},
	}
});

app.component('global-component', {
	props: ['link'],
	template: `
		<div>
			<h3>全局组件</h3>
			<ul>
				<li v-for="item in link">{{item}}</li>
			</ul>
		</div>
	`,
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>